<template>
  <div>
      <div style="width:100%;height:50px;text-align:center;line-height:50px;font-size: 18px;border-bottom:1px solid black">人气推荐--></div>
      <div class="bottomlist_container">
        <div v-for="(item,index) in list.slice(9,13)" :key="index" class="bottomlist_wrapper"
        @click="onClickPushListys(item)">
            <div class="bottomlist_wrapper_img">
                <img :src="item.pic" alt="">
            </div>
            <div style="font-size:14px" v-html="item.name"></div>
            <div style="font-size:12px;width:100%;height:20px;overflow: hidden;">{{item.characteristic}}</div>
            <div style="color:red;font-size:10px">{{item.minPrice | Price}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import axios from "axios"
// 8 13
export default {
    data(){
        return{
            list:[]      
        }
    },
    mounted(){
        axios.get("https://api.it120.cc/small4/shop/goods/list").then(res=>{
           
            this.list = res.data.data
            // console.log(this.list);
        })
    },
    filters:{
        Price(val){
            return '￥' + val
        }
    },
    methods:{
        onClickPushListys(item){
            this.$router.push({
                path:this.$myRouter.PathConfig.LISTYS,
                query:{
                    id:item.id
                }
            })
        }
    }
}
</script>

<style>
.bottomlist_container
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
.bottomlist_wrapper
{
    width: 50%;
    height: 320px;
}
.bottomlist_wrapper_img img
{
    width: 100%;
    height: 240px;
}
</style>